<template>
	<div class="gobang">
		<div class="gobang-chessboard" ref="gobangChessboard">
			<canvas id="chessboard" ref="chessboardCanvas"></canvas>
		</div>
		<div class="gobang-gameplay">
			<div class="gobang-gameplay-people">
				<div class="gobang-gameplay-people-other" v-for="item in 2">
					<span>
						<img :src="defaluteImg(item == 2?store.state.userInfoX?.avatar:data.opposite?.avatar)" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}">
						<strong v-show="data.isStartTime == item">{{timing}}</strong>
					</span>
					<span v-if="data.opposite">{{item==1?data.opposite?.nickName:store.state.userInfoX?.nickName}}<b> - {{item==1?data.opposite?.account === 'admin'?data.opposite.grade:data.otherGradeTotal:data.currentGrade}}</b></span>
					<span v-else @click="inviteClick(item)"  :class="{inviteStyle:item==1}">{{item==1?'点击邀请':store.state.userInfoX?.nickName}}<b  v-if="item==2"> - {{data.currentGrade}}</b></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref,onMounted,reactive,inject,onBeforeUnmount,watch } from 'vue'
	import bus from '../../public/bus'
	import { useRouter,useRoute } from 'vue-router'
	import {debounce,defaluteImg,gradeTotal} from '../../public/common'
	import { sendMessage } from "../main/webServer"
	import { ElMessage,ElMessageBox} from 'element-plus'
	import { useChessboard,useChessPiece,useTiming,useManMachine,useRegret,useIsStartchess,useGetchess } from '../main/useChessboard.ts'
	import { playAudio } from '../main/webServer'
	import moment from 'moment'
	const store = inject('store')
	const router = useRouter()
	const gobangChessboard = ref<HTMLElement>();
	const chessboardCanvas = ref<HTMLElement>();
	
	let userValue = ref<string>("")
	let data = reactive({
		
	})

	onBeforeUnmount(()=>{
		
		
	})
	
</script>

<style lang="scss" scoped>
	.gobang{
		width: 100%;
		height: calc(100%);
		background-color: white;
		position: relative;
		display: flex;
		justify-content: center;
		.gobang-chessboard{
			height: 100%;
			padding: 30px;
			display: inline-block;
			box-sizing: border-box;
			margin-right: 6%;
			position: relative;
			#chessboard{
				background-color: rgb(220,181,122);
				box-shadow: 0 0 6px 0 #aaa;
				border-radius: 3px;
			}
			.gobang-chessboard-operation{
				position: absolute;
				right: -50px;
				bottom: 25px;
				button{
					display: block;
					width: 80px;
					height: 30px;
					background-color: white;
					border-radius: 5px;
					border-top-left-radius:0 ;
					border-bottom-left-radius: 0;
					border: 1px solid #dcb57a;
					border-left: 0;
					margin-bottom: 10px;
					cursor: pointer;
					
					&:hover{
						opacity: 0.8;
					}
				}
			}
		}
		.gobang-gameplay{
			width: 30%;
			height: 100%;
			display: inline-block;
			vertical-align: top;
			padding: 30px 0;
			box-sizing: border-box;
			position: relative;
			.gobang-gameplay-people-send{
				display: flex;
				align-items: center;
				position: absolute;
				top: 25px;
				right: 30px;
				.el-select{
					width: 200px;
				}
				button{
					margin-left: 10px;
				}
			}
			.gobang-gameplay-people{
				width: 100%;
				height: 50px;
				font-size: 16px;
				color: #222;
			}
			.gobang-gameplay-people-other{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				b{
					color: rgb(249, 171, 8);
					font-family: cursive;
				}
				&:nth-of-type(1){
					position: absolute;
					top: 15%;
				}
				&:nth-of-type(2){
					position: absolute;
					bottom: 10%;
				}
				span{
					&:nth-of-type(1){
						width: 60px;
						height: 60px;
						border-radius: 60%;
						overflow: hidden;
						position: relative;
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					&:nth-of-type(2){
						margin-top: 10px;
					}
					strong{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						font-size: 18px;
						color: white;
						text-align: center;
						line-height: 60px;
						background-color: rgba(0,0,0,0.5);
						font-weight: 500;
					}
				}
				.inviteStyle{
					color: rgb(249, 171, 8);
					font-size: 14px;
					cursor: pointer;
					&:hover{
						opacity: 0.6;
					}
				}
			}
		}
		.gobang-win{
			width: 300px;
			height: 200px;
			position: absolute;
			left: 0;
			top: 20%;
			right: 0;
			margin: auto;
			background-color: white;
			border-radius: 5px;
			text-align: center;
			line-height: 200px;
			font-size: 16px;
			color: #222;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 0 30px;
			box-shadow: 0 0 10px 0 #aaa;
			p{
				height: 30px;
				line-height: 30px;
			}
			button{
				width: 120px;
				height: 45px;
				background-color: rgb(249, 171, 8);
				text-align: center;
				line-height: 45px;
				font-size: 16px;
				color: white;
				border: 0;
				border-radius: 5px;
				cursor: pointer;
				margin-top: 30px;
			}
			
		}
		.gobang-invite{
			:deep(.el-dialog__body){
				padding: 10px 20px 15px 20px;
			}
			.gobang-invite-seach{
				margin-bottom: 10px;
			}
			.gobang-invite-list{
				height: 300px;
				overflow: auto;
				.gobang-invite-list-bottom{
					font-size: 13px;
					color: #aaa;
					text-align: center;
					padding: 10px;
				}
				.gobang-invite-list-group{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 5px;
					border-bottom: 1px solid #eee;
					padding: 10px 0;
					span{
						display: inline-block;
						width: 20px;
						height: 20px;
						border-radius: 60%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					strong{
						font-size: 14px;
						color: #000000;
						margin: 0 20px 0 3px;
						width: calc(100% - 90px);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						b{
							color: rgb(249, 171, 8);
							font-family: cursive;
						}
					}
					button{
						padding: 3px 5px;
						font-size: 12px;
						background-color: rgb(249, 171, 8);
						color: white;
						border-radius: 5px;
						border: 0;
						cursor: pointer;
						outline: none;
						&:hover{
							opacity: 0.8;
						}
					}
				}
			}
			
		}
		
		
	}
</style>
